<template>
    <div class="findmusic">
        <div class="tuijian">
            <span>推荐歌单</span>
            <button>更多></button>
        </div>
        <div class="swiper_music">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,index) in musics" :key="index">
                    <div class="count" @click="ToDetailSongs(index)">
                        <i class="iconfont icon-bofang"></i>
                        <span style="color: white;font-weight:500;">{{item.playcount}}</span>
                        <img :src="item.pic">
                    </div>
                    <span>{{item.name}}</span>
                </div>
            </div>
        </div>
    </div>
    
</template>

<script>
import Swiper from 'swiper'
import "swiper/dist/css/swiper.css";
import axios from 'axios'
import {reactive,toRefs,onMounted} from 'vue'
import {useRouter} from 'vue-router'

export default {
  components: {
    Swiper
  },
  setup(){
     const state=reactive({
         musics:[]
     })
     onMounted(async()=>{
        var mySwiper3 = new Swiper('.swiper_music',{
            slidesPerView: 3,//数量
            observer:true,
            direction : 'horizontal',//设置水平还是垂直vertical
        })
        
        let resultList=await axios.get('http://localhost:3000/personalized?limit=8').then(res=>res.data.result);
        for(var i=0;i<8;i++){
            var obj={id:"",name:"",pic:null,playcount:""};
            obj.id=resultList[i].id;
            obj.name=resultList[i].name;
            obj.pic=resultList[i].picUrl;
            var count=resultList[i].playCount;
            if(count/10000<=1) obj.playcount=count+"";
            else if(count/100000000<=1) obj.playcount=Math.trunc(count/10000)+"万";
            else obj.playcount=Math.trunc(count/100000000)+"亿";
            state.musics.push(obj);
        }
     })
     const router=useRouter()
     const ToDetailSongs=(index)=>{
        router.push({
            path:'/gedanSongs',
            query:{
                id:state.musics[index].id
            }
        })
     }
     return{
         ...toRefs(state),
         ToDetailSongs
     }
  }

};
</script>

<style>
/* .findmusic{
    border-radius: 0.2rem;
    background: rgba(200,200,200,0.3);
    padding: 0.12rem 0rem;
} */
.tuijian{
    width: 7rem;
    height: 0.4rem;
    margin: 0.12rem auto;
    display: flex;
    justify-content: space-between;
}
.tuijian span{
    font-size: 0.34rem;
    font-weight: 800;
    color: black;
    opacity: 0.8;
}
.tuijian button{
    padding: 0.04rem 0.15rem 0.06rem 0.2rem;
    border: 0px;
    border-radius: 0.3rem;
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
}
.swiper_music{
    width: 7rem;
    height: 2.75rem;
    margin: 0.3rem auto;
}
.swiper_music .swiper-slide {
    width: 2.05rem;
    margin-right: 0.18rem;
}
.swiper_music .swiper-slide img{
   width: 2.05rem;
   height: 2rem;
   border-radius: 0.2rem;
   position: relative;
   top: -0.34rem;
   z-index: -1;
}
.swiper_music .swiper-slide span{
    color:rgba(0, 0, 0, 0.8);
    font-weight: bold;
    text-align: left;
    padding: 0.1rem 0.02rem 0 0.1rem;
    overflow: hidden;
}
.count{
    width: 2rem;
    height: 2rem;
    text-align: right;
    color: white;
    padding-right: 0.08rem;
}
</style>